<template>
	<view>
		<view class="coupon-header">
			<view class="coupon-header-filter">
				<view class="layout">
					<view class="coupon-header-backend" @click="handleHomeButton()">
						<image src="/static/icon/icon-back.png"></image>
					</view>
					<view class="coupon-header-tooltip">
						浏览记录
					</view>
					<view class="coupon-header-more">
						<image src="/static/icon/icon-cash.png"></image>
					</view>
				</view>				
			</view>
			<view class="coupon-header-menu">
				<view class="layout">
					<view class="coupon-menu-item" @click="filterForm.couponStatus=0">
						<view :class="filterForm.couponStatus == 0?'coupon-menu-active':''">商品</view>
					</view>
					<view class="coupon-menu-item" @click="filterForm.couponStatus=1">
						<view :class="filterForm.couponStatus == 1?'coupon-menu-active':''">店铺</view>
					</view>
					<view class="coupon-menu-item" @click="filterForm.couponStatus=2">
						<view :class="filterForm.couponStatus == 2?'coupon-menu-active':''">文章</view>
					</view>
					<view class="coupon-menu-item" @click="filterForm.couponStatus=3">
						<view :class="filterForm.couponStatus == 3?'coupon-menu-active':''">基金</view>
					</view>
				</view>
			</view>
		</view>
		<view class="coupon-box">
			<view class="coupon-box-block" v-for="(order,index) in orderList" :key="index" @click="handleOrderButton(order)">
				<view class="layout">
					<view class="coupon-box-block-volume">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="coupon-box-block-tooltip">
						<view class="coupon-box-block-tooltip-action">							
							<view class="coupon-box-block-tooltip-bold">国内机票代金卷</view>
							<view class="coupon-box-block-tooltip-note">满150可优惠8、满350可优惠20，满550可优惠33、满1000可优惠1000</view>
							<view class="coupon-box-block-tooltip-button">去使用</view>
						</view>
						<view class="coupon-box-block-tooltip-expire layout">
							<view class="coupon-box-block-tooltip-expire-note">有效期2023.11.25-2023.02.21</view>
							<view class="coupon-box-block-tooltip-expire-button layout">
								<view>使用说明</view>
								
								<view class="coupon-box-block-tooltip-expire-button-icon">
									<image src="../../../static/icon/icon-open.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterForm:{
					couponStatus:0
				},
				loading:"loaded",
				orderTotal:0,
				orderList:[
					{
						orderID:12313,
						storeData:{
							storeName:"洁柔京东官方旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"完成"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						couponStatus:{
							value:1,
							label:"待付款"
						}
					}
				]
			}
		},
		onLoad(option) {
			this.orderID = 100
			if(option.hasOwnProperty("couponStatus")){
				this.filterForm.couponStatus = option.couponStatus;
			}
			this.refreshOrderList()
		},
		methods: {
			handleHomeButton:function(){
				uni.switchTab({
					url:"/pages/home/home/home"
				})
			},
			handleOrderButton:function(order){
				uni.navigateTo({
					url:"/pages/home/coupon-detail/coupon-detail?orderID="+order.orderID
				})
			},
			refreshOrderList:function(){
				this.$transaction.getOrderList({
					"orderID":this.orderID
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 200rpx; }

.coupon-header { position: fixed; top:0; left: 0; right: 0; padding-top: 25rpx; background: #ededed; z-index: 100; }
.coupon-header { padding-top: var(--status-bar-height);}
.coupon-header-backend { width: 30rpx; height: 30rpx; padding: 0 25rpx; padding-top: 10rpx;}
.coupon-header-tooltip {  color: #000; width: 580rpx; text-align: center; bcoupon-radius: 25rpx; height: 40rpx; line-height: 40rpx; padding: 5rpx 15rpx; font-size: 18px; }
.coupon-header-button { width: 100rpx; height: 40rpx; padding-top: 10rpx; padding-left: 80rpx; text-align: center; font-size: 12px; }
.coupon-header-more { width: 30rpx; height: 30rpx; padding-top: 10rpx;}

.coupon-menu-item { padding: 30rpx 25rpx; font-size: 14px; background: #ededed; z-index: 99; }
.coupon-menu-active { font-weight: bold; color: #f30; }

.coupon-box { padding: 0 25rpx; }
.coupon-box-block { padding: 0; bcoupon-radius: 15rpx; background: #fff; margin-bottom: 20rpx; height: 200rpx; }

.coupon-box-block-volume { width: 280rpx; background: #c60; position: relative; padding-top: 0; border-top-left-radius: 20rpx; }
.coupon-box-block-volume {  border-bottom-left-radius: 20rpx; }
.coupon-box-block-volume-bold { text-align: center; font-size: 32px; font-weight: bold; }
.coupon-box-block-volume-label { text-align: center;}

.coupon-box-block-tooltip { padding: 0 25rpx; width: 500rpx; height: 200rpx; position: relative;}
.coupon-box-block-tooltip {  border-bottom-right-radius: 20rpx; border-top-right-radius: 20rpx; }
.coupon-box-block-tooltip-action { height: 150rpx; }
.coupon-box-block-tooltip-bold { font-size: 18px; font-weight: 800; padding-top: 15rpx; }
.coupon-box-block-tooltip-note { width: 280rpx; height: 60rpx; text-overflow: ellipsis; overflow: hidden; font-size: 13px; color: #999; line-height: 20px; padding: 20rpx 0; }
.coupon-box-block-tooltip-button { border: #f30 1px solid; border-radius: 35rpx; padding: 15rpx 30rpx; width: 100rpx;}
.coupon-box-block-tooltip-button { color: #f30; position: absolute; right: 10rpx; bottom: 40rpx; }
.coupon-box-block-tooltip-expire { width: 400rpx; font-size: 10px; color: #999; padding-top: 10rpx; height: 30rpx; line-height: 30rpx; overflow: hidden;}
.coupon-box-block-tooltip-expire-note { width: 300rpx;}
.coupon-box-block-tooltip-expire-button { width: 100rpx;}
.coupon-box-block-tooltip-expire-button-icon { padding-left: 5rpx; padding-top: 5rpx; width: 20rpx; height: 20rpx; }

.coupon-box-block-button-item { bcoupon-radius: 15rpx; padding: 5rpx 10rpx; font-size: 12px; border: #ededed 1px solid; margin-right: 10rpx; }
</style>
